<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Denselin's Music</title>
  <link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet" />
  <link rel="stylesheet" href="../styles/style_main.css">
  <link rel="stylesheet" href="../styles/style_frameWork.css">
</head>

<body>
<div class="container">
  <!-- 上方主页面 -->
  <div class="main-container">
    <!-- 左侧导航栏 -->
    <div class="left">
      <div class="logo">
        <img src="../images/logo.svg" alt="logo">
      </div>
      <div class="onlinemusic">
        <div>
          <p>在线音乐</p>
        </div>
        <ul>
          <li onclick="showPage('page1',this)"><i class="ri-home-line"></i>推荐</li>
          <li onclick="showPage('page2',this)"><i class="ri-cup-line"></i>乐馆</li>
          <li onclick="showPage('page3',this)"><i class="ri-mv-line"></i>视频</li>
        </ul>
      </div>
      <div class="mymusic">
        <div>
          <p>我的音乐</p>
        </div>
        <ul>
          <li onclick="showPage('page4',this)"><i class="ri-heart-line"></i>喜欢</li>
          <li onclick="showPage('page5',this)"><i class="ri-time-line"></i>最近播放</li>
          <li onclick="showPage('page6',this)"><i class="ri-download-2-line"></i>本地和下载</li>
          <li onclick="showPage('page7',this)"><i class="ri-customer-service-line"></i>试听列表</li>
        </ul>
      </div>
      <div class="myplaylists">
        <div>
          <p>自建歌单</p>
        </div>
        <ul>
          <li><img src="../images/liangbo.jpg" alt="img">梁博</li>
          <li><img src="../images/happy.jpg" alt="img">快乐</li>
          <li><img src="../images/quer.webp" alt="img">身心安静</li>
          <li><img src="../images/oldsong.jpg" alt="img">老歌</li>
          <li><img src="../images/enSong.webp" alt="img">英文</li>
        </ul>
      </div>
    </div>
    <!-- 顶部栏 -->

    <!-- 右侧主要内容 -->
    <div class="right">
      <div class="topBar">
        <div class="rh">
            <span class="fowardAndbackon">
              <i class="ri-arrow-left-s-line"></i>
              <i class="ri-arrow-right-s-line"></i>
            </span>
          <span class="restart"><i class="ri-restart-line"></i></span>
          <div class="seh">
            <div class="search">
              <i class="ri-search-line"></i>
              <input type="text" placeholder="搜索">
            </div>
            <span class="listhen"><i class="ri-music-fill"></i></span>
          </div>
        </div>
        <div class="lef">
          <div class="avatar"><img src="../images/avatar.jpg" alt=""></div>
          <div class="name">
            <p>Denselin</p>
          </div>
        </div>
      </div>
      <div class="ma">
        <div class="page active">
          <div class="index">
            <p>Welcome to Denselin's</p>
            <p>Music Web</p>
          </div>
        </div>
        <div>
          <div id="page1" class="page">
            <h2>这是推荐页面</h2>
          </div>
          <div id="page2" class="page">
            <h2>这是乐馆页面</h2>
            <div id="dynamic-content"></div> <!-- 用于动态加载的新内容 -->
            <br><br><br>
          </div>
          <div id="page3" class="page">
            <h2>这是视频页面</h2>
          </div>
          <div id="page4" class="page">
            <div class="favor">

            </div>
          </div>
          <div id="page5" class="page">
            <h2>这是最近播放页面</h2>
          </div>
          <div id="page6" class="page">
            <h2>这是本地和下载页面</h2>
          </div>
          <div id="page7" class="page">
            <h2>这是试听列表页面</h2>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 底部播放器 -->
  <div class="buttom">
    <div class="start">
      <div class="music-small-img">
        <a href="#"><img src="../images/liangbo.jpg" alt="music-logo"></a>
      </div>
      <div class="music-information">
        <ul>
          <li>歌曲名字</li>
          <li>歌手</li>
        </ul>
      </div>
      <div class="selections">
        <p>
          <i class="ri-heart-3-line"></i>
          <i class="ri-message-3-line"></i>
          <i class="ri-menu-2-fill"></i>
        </p>
      </div>
    </div>
    <div class="center">
      <div class="mediaControl">
        <ul>
          <li><i class="ri-skip-back-fill"></i></li>
          <li onclick="toggleIcon(this)"><i class="ri-pause-line"></i></li>
          <li><i class="ri-skip-forward-fill"></i></li>
        </ul>
      </div>
      <div class="processBar">

      </div>
    </div>
    <div class="end">wohenhao</div>
  </div>
</div>
<script>
  function toggleIcon(element) {
    const icon = element.querySelector('i');
    if (icon.classList.contains('ri-pause-line')) {
      icon.classList.remove('ri-pause-line');
      icon.classList.add('ri-play-fill');
    } else {
      icon.classList.remove('ri-play-fill');
      icon.classList.add('ri-pause-line');
    }
  }

  function showPage(page, element) {
    const pages = document.querySelectorAll('.page');
    pages.forEach((p) => p.style.display = 'none');
    document.getElementById(page).style.display = 'block';

    const navItems = document.querySelectorAll('.left ul li');
    navItems.forEach(item => item.classList.remove('click'));
    element.classList.add('click');
  }


</script>
</body>

</html>